<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Flex - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .flex-align-content-demo {
            max-width: 700px;
        }
        .flex-align-content-demo div {
            height: 40px;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Flex</a></li>
                    <li class="toc-entry"><a href="#_flex_enable">Enable flex</a></li>
                    <li class="toc-entry"><a href="#_flex_dir">Direction</a></li>
                    <li class="toc-entry"><a href="#_flex_justify_content">Justify content</a></li>
                    <li class="toc-entry"><a href="#_flex_align_items">Align items</a></li>
                    <li class="toc-entry"><a href="#_flex_align_self">Align self</a></li>
                    <li class="toc-entry"><a href="#_flex_align_content">Align content</a></li>
                    <li class="toc-entry"><a href="#_flex_auto_margins">Auto margins</a></li>
                    <li class="toc-entry"><a href="#_flex_wrap">Wrap</a></li>
                    <li class="toc-entry"><a href="#_flex_order">Order</a></li>
                    <li class="toc-entry"><a href="#_flex_responsive">Responsive</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Flex</h1>
                <p class="text-leader">
                    Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
                </p>

                <!-- ads-html -->

                <h3 id="_flex_enable">Flex enable</h3>
                <p>
                    To create flexbox container and transform direct children elements into flex items add <code>.d-flex</code> or <code>.d-inline-flex</code> class to element. Flex containers and items are able to be modified further with additional flex properties.
                </p>
                <div class="example">
                    <div class="d-flex p-2 bg-cyan fg-white">I am a flexbox container!</div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex p-2"&gt;I am a flexbox container!&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-inline-flex p-2 bg-cyan fg-white">I am a inline flexbox container!</div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-inline-flex p-2"&gt;I am a inline flexbox container!&lt;/div&gt;
                </code></pre>
                <p>
                    Responsive variations also exist for <code>.d-flex</code> and <code>.d-inline-flex</code> as <code>.d-flex-*</code> and <code>.d-inline-flex-*</code>. You can change asterisk to <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> or <code>xxl</code>.
                </p>

                <h3 id="_flex_dir">Direction</h3>
                <p>
                    Set the direction of flex items in a flex container with direction utilities.
                    In most cases you can omit the horizontal class here as the browser default is <code>row</code>.
                    However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
                </p>
                <p>
                    Use <code>.flex-row</code> to set a horizontal direction (the browser default), or <code>.flex-row-r</code> to start the horizontal direction from the opposite side.
                </p>
                <div class="example">
                    <div class="d-flex flex-row">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-row-r">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-row"&gt;
                        &lt;div class="p-2 bg-lightCyan"&gt;Flex item 1&lt;/div&gt;
                        &lt;div class="p-2 bg-cyan"&gt;Flex item 2&lt;/div&gt;
                        &lt;div class="p-2 bg-darkCyan"&gt;Flex item 3&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="d-flex flex-row-r"&gt;
                        &lt;div class="p-2 bg-lightCyan"&gt;Flex item 1&lt;/div&gt;
                        &lt;div class="p-2 bg-cyan"&gt;Flex item 2&lt;/div&gt;
                        &lt;div class="p-2 bg-darkCyan"&gt;Flex item 3&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
                <p>
                    Use <code>.flex-column</code> to set a vertical direction, or <code>.flex-column-r</code> to start the vertical direction from the opposite side.
                </p>
                <div class="example">
                    <div class="d-flex flex-column">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-column-r mt-2">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-column"&gt;
                        &lt;div class="p-2 bg-lightCyan"&gt;Flex item 1&lt;/div&gt;
                        &lt;div class="p-2 bg-cyan"&gt;Flex item 2&lt;/div&gt;
                        &lt;div class="p-2 bg-darkCyan"&gt;Flex item 3&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="d-flex flex-column-r"&gt;
                        &lt;div class="p-2 bg-lightCyan"&gt;Flex item 1&lt;/div&gt;
                        &lt;div class="p-2 bg-cyan"&gt;Flex item 2&lt;/div&gt;
                        &lt;div class="p-2 bg-darkCyan"&gt;Flex item 3&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_flex_justify_content">Justify content</h3>
                <p>
                    Use <code>justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code>flex-direction: column</code>).
                    Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, or <code>around</code>.
                </p>
                <div class="example">
                    <div class="d-flex flex-justify-start bg-lightGray">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-justify-end bg-lightGray mt-2">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-justify-center bg-lightGray mt-2">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-justify-between bg-lightGray mt-2">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-justify-around bg-lightGray mt-2">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-justify-start"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-justify-end"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-justify-center"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-justify-between"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-justify-around"&gt;...&lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_flex_align_items">Align items</h3>
                <p>
                    Use <code>align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>).
                    Choose from <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default).
                </p>
                <div class="example">
                    <div class="d-flex flex-align-start bg-lightGray" style="height: 100px">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-align-end bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-align-center bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-align-baseline bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                    <div class="d-flex flex-align-stretch bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan">Flex item 1</div>
                        <div class="p-2 bg-cyan">Flex item 2</div>
                        <div class="p-2 bg-darkCyan">Flex item 3</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-align-start"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-align-end"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-align-center"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-align-baseline"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-align-stretch"&gt;...&lt;/div&gt;
                </code></pre>

                <h3 id="_flex_align_self">Align self</h3>
                <p>
                    Use <code>align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>).
                    Choose from the same options as align-items: <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default).
                </p>
                <div class="example">
                    <div class="d-flex bg-lightGray" style="height: 100px">
                        <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div>
                        <div class="p-2 bg-cyan flex-self-start">Flex item 2</div>
                        <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div>
                    </div>
                    <div class="d-flex bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div>
                        <div class="p-2 bg-cyan flex-self-end">Flex item 2</div>
                        <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div>
                    </div>
                    <div class="d-flex bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div>
                        <div class="p-2 bg-cyan flex-self-center">Flex item 2</div>
                        <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div>
                    </div>
                    <div class="d-flex bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div>
                        <div class="p-2 bg-cyan flex-self-baseline">Flex item 2</div>
                        <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div>
                    </div>
                    <div class="d-flex bg-lightGray mt-2" style="height: 100px">
                        <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div>
                        <div class="p-2 bg-cyan flex-self-stretch">Flex item 2</div>
                        <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex"&gt;
                        &lt;div class="flex-self-start"&gt;...&lt;/div&gt;
                        &lt;div class="flex-self-end"&gt;...&lt;/div&gt;
                        &lt;div class="flex-self-center"&gt;...&lt;/div&gt;
                        &lt;div class="flex-self-baseline"&gt;...&lt;/div&gt;
                        &lt;div class="flex-self-stretch"&gt;...&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_flex_align_content">Align content</h3>
                <p>
                    Use <code>align-content</code> utilities on flexbox containers to align flex items together on the cross axis.
                    Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, <code>around</code>, or <code>stretch</code>.
                    To demonstrate these utilities, we’ve enforced <code>flex-wrap: wrap</code> and increased the number of flex items.
                </p>

                <p class="remark warning">
                    This property has no effect on single rows of flex items.
                </p>
                <div class="example">
                    <div class="d-flex flex-content-start flex-wrap bg-gray p-1 flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-start flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-flex flex-content-end flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-end flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-flex flex-content-center flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-center flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-flex flex-content-between flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-between flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-flex flex-content-around flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-around flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="d-flex flex-content-stretch flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-content-stretch flex-wrap"&gt;...&lt;/div&gt;
                </code></pre>

                <h3 id="_flex_auto_margins">Auto margins</h3>
                <p>
                    Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
                </p>

                <h4>.flex-justify-content</h4>
                <p>
                    Easily move all flex items to one side, but keep another on the opposite end by mixing <code>justify-content</code> with <code>margin-right: auto</code> or <code>margin-left: auto</code>.
                </p>
                <div class="example">
                    <div class="d-flex flex-justify-end bg-gray">
                        <div class="mr-auto p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>

                    <div class="d-flex flex-justify-start bg-gray mt-2">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="ml-auto p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-justify-end"&gt;
                        &lt;div class="mr-auto"&gt;Flex item&lt;/div&gt;
                        &lt;div&gt;Flex item&lt;/div&gt;
                        &lt;div&gt;Flex item&lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class="d-flex flex-justify-start"&gt;
                        &lt;div&gt;Flex item&lt;/div&gt;
                        &lt;div&gt;Flex item&lt;/div&gt;
                        &lt;div class="ml-auto"&gt;Flex item&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4>.flex-align-items</h4>
                <p>
                    Similarly, move one flex item to the top or bottom of a container by mixing <code>align-items</code>, <code>flex-direction: column</code>, and <code>margin-top: auto</code> or <code>margin-bottom: auto</code>.
                </p>
                <div class="example">
                    <div class="d-flex flex-align-start flex-column bg-gray" style="height: 200px;">
                        <div class="mb-auto p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>

                    <div class="d-flex flex-align-end flex-column bg-gray mt-2" style="height: 200px;">
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="p-1 border bd-darkGray bg-light">Flex item</div>
                        <div class="mt-auto p-1 border bd-darkGray bg-light">Flex item</div>
                    </div>
                </div>

                <!-- ads-html -->

                <h3 id="_flex_wrap">Wrap</h3>
                <p>
                    Change how flex items wrap in a flex container.
                    Choose from no wrapping at all (the browser default) with <code>.flex-nowrap</code>, wrapping with <code>.flex-wrap</code>, or reverse wrapping with <code>.flex-wrap-r</code>.
                </p>
                <pre><code class="html">
                    &lt;div class="d-flex flex-nowrap"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-wrap"&gt;...&lt;/div&gt;
                    &lt;div class="d-flex flex-wrap-r"&gt;...&lt;/div&gt;
                </code></pre>

                <h3 id="_flex_order">Order</h3>
                <p>
                    Change the visual order of specific flex items with a handful of order utilities.
                    We only provide options for making an item first or last, as well as a reset to use the DOM order.
                    As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.
                </p>
                <div class="example">
                    <div class="d-flex flex-nowrap bg-gray">
                        <div class="order-3 p-1 border bd-darkGray bg-light">First flex item</div>
                        <div class="order-2 p-1 border bd-darkGray bg-light">Second flex item</div>
                        <div class="order-1 p-1 border bd-darkGray bg-light">Third flex item</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-nowrap"&gt;
                        &lt;div class="order-3"&gt;First flex item&lt;/div&gt;
                        &lt;div class="order-2"&gt;Second flex item&lt;/div&gt;
                        &lt;div class="order-1"&gt;Third flex item&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_flex_responsive">Responsive</h3>
                <p>
                    All flex utilities classes has media variants with breakpoints suffixes:
                        <code>-sm</code>,
                        <code>-md</code>,
                        <code>-lg</code>,
                        <code>-xl</code>,
                        <code>-xxl</code>.
                </p>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>